<template>
  <div class="message-demo">
    <h3 class="title">普通的Message提示</h3>
    <div>
      <d-button @click="vueInfo">vue调用提示</d-button>
    </div>
    <h3 class="title">不同类型的Message提示</h3>
    <div>
      <d-button color="blue" @click="message('info')">消息</d-button>
      <d-button color="green" @click="message('success')">成功</d-button>
      <d-button color="yellow" @click="message('warn')">警告</d-button>
      <d-button color="red" @click="message('error')">错误</d-button>
      <d-button @click="message('loading')">加载中</d-button>
    </div>
    <h3 class="title">不同类型的Message提示第二种用法</h3>
    <div>
      <d-button color="blue" @click="message2('info')">消息</d-button>
      <d-button color="green" @click="message2('success')">成功</d-button>
      <d-button color="yellow" @click="message2('warn')">警告</d-button>
      <d-button color="red" @click="message2('error')">错误</d-button>
      <d-button @click="message2('loading')">加载中</d-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'messageDemo',
  methods: {
    vueInfo () {
      this.$Message('这是一个普通的提醒')
    },
    message (type) {
      let text = { info: '消息', success: '成功', warn: '警告', error: '错误', loading: '加载中' }[type]
      this.$Message({
        type,
        content: `这是一个${text}的消息`
      })
    },
    message2 (type) {
      let text = { info: '消息', success: '成功', warn: '警告', error: '错误', loading: '加载中' }[type]
      this.$Message[type](`这是一个${text}的消息`)
      // this.$Message.info('这是一个消息的消息')
    }
  }
}
</script>
